// 周边配套
<template>
  <div id="SupportDetailsList">
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="SupportDetailsList_wrap">
      <div class="SupportDetailsList_wrap_tabs">
        <div class="navAcitive">
          <ul>
            <li
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ activeNameTipe: activeCode == index }"
            >
              <a :href="prefixUrl + item.href">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div>
          <div id="tabNameAll">
            <p class="PropeIndex6_p1">
              <b>{{ HouseDetail.name }}</b>
              <span
                v-html="
                    HouseDetail.saleStatus == 1
                      ? '在售'
                      : HouseDetail.saleStatus == 2
                      ? '售罄'
                      : '待售'
                  "
              >在售</span>
              <span
                style="color: #ef524d; font-weight: bold; font-size: 16px"
                v-if="HouseDetail.totalPrice && HouseDetail.totalPriceMax"
              >
                参考总价：{{ HouseDetail.totalPrice }}万-{{
                HouseDetail.totalPriceMax
                }}万
              </span>

              <span
                style="color: #ef524d; font-weight: bold; font-size: 16px"
                v-else-if="
                    HouseDetail.totalPrice || HouseDetail.totalPriceMax
                  "
              >参考总价：{{ HouseDetail.totalPrice }}万起</span>

              <span style="color: #ef524d; font-weight: bold; font-size: 16px" v-else>参考总价：价格待定</span>
            </p>
            <div class="EstateDetail">
              <ul class="EstateDetail_ahsd_ul">
                <h4>基本信息</h4>
                <li class="EstateDetail_li1 EstateDetail_li_p1">
                  <div>
                    <p>
                      <b>物业类型：</b>
                      <span>{{HouseDetail.estateTypeName}}</span>
                    </p>
                    <p>
                      <b>参考价格：</b>
                      <span v-if="HouseDetail.meterPrice">均价{{ HouseDetail.meterPrice }}元/平</span>
                      <span v-else>待定</span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <b>项目特色：</b>
                      <span
                        v-if="
                            HouseDetail.lab1 ||
                            HouseDetail.lab2 ||
                            HouseDetail.lab1
                          "
                      >
                        {{ HouseDetail.lab1 }}
                        {{ HouseDetail.lab2 }}
                        {{ HouseDetail.lab3 }}
                      </span>
                      <span v-else>待定</span>
                    </p>
                    <p>
                      <b>区域位置：</b>
                      <span
                        v-html="
                            HouseDetail.regionName
                              ? HouseDetail.regionName
                              : '待定'
                          "
                      ></span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <b>楼盘地址：</b>
                      <span>{{ HouseDetail.address }}</span>
                    </p>
                    <p>
                      <b>预售证号：</b>
                      <span
                        v-html="
                            HouseDetail.preSaleNum
                              ? HouseDetail.preSaleNum
                              : '待定'
                          "
                      ></span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <b>开发商：</b>
                      <span
                        v-html="
                            HouseDetail.buildingCompany
                              ? HouseDetail.buildingCompany
                              : '待定'
                          "
                      ></span>
                    </p>
                  </div>
                </li>
                <h4>规划信息</h4>
                <li class="EstateDetail_li1 EstateDetail_li_p2">
                  <div>
                    <p>
                      <b>建筑类型：</b>
                      <span>{{HouseDetail.buidingTypeName}}</span>
                    </p>
                    <p>
                      <b>绿化率：</b>
                      <span
                        v-html="
                            HouseDetail.greenRatio
                              ? HouseDetail.greenRatio + `%`
                              : '待定'
                          "
                      ></span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <b>占地面积：</b>
                      <span
                        v-html="
                            HouseDetail.landArea
                              ? HouseDetail.landArea + `㎡`
                              : '待定'
                          "
                      ></span>
                    </p>
                    <p>
                      <b>容积率：</b>
                      <span
                        v-html="
                            HouseDetail.plotRatio
                              ? HouseDetail.plotRatio
                              : '待定'
                          "
                      ></span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <b>建筑面积：</b>
                      <span
                        v-html="
                            HouseDetail.estateArea
                              ? HouseDetail.estateArea + `㎡`
                              : '待定'
                          "
                      ></span>
                    </p>
                    <p>
                      <b>规划户数：</b>
                      <span
                        v-html="
                            HouseDetail.houseNum
                              ? HouseDetail.houseNum + `户`
                              : '待定'
                          "
                      ></span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <b>产权年限：</b>
                      <span
                        v-html="
                            HouseDetail.estateYear
                              ? HouseDetail.estateYear + `年`
                              : '待定'
                          "
                      ></span>
                    </p>
                    <p>
                      <b>楼盘户型：</b>
                      <span
                        v-html="
                            HouseDetail.mainRoom ? HouseDetail.mainRoom : '待定'
                          "
                      ></span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <b>交房时间：</b>
                      <span
                        v-html="
                            HouseDetail.handedDate
                              ? HouseDetail.handedDate
                              : '待定'
                          "
                      ></span>
                    </p>
                  </div>
                </li>
                <h4>物业信息</h4>
                <li class="EstateDetail_li1 EstateDetail_li_p3">
                  <div>
                    <p>
                      <b>物业公司：</b>
                      <span
                        v-html="
                            HouseDetail.propertyCompany
                              ? HouseDetail.propertyCompany
                              : '待定'
                          "
                      ></span>
                    </p>
                    <p>
                      <b>物业费：</b>
                      <span
                        v-html="
                            HouseDetail.propertyFee
                              ? HouseDetail.propertyFee + `元/㎡/月`
                              : '待定'
                          "
                      ></span>
                    </p>
                  </div>
                  <p>
                    <b>车位：</b>
                    <span
                      v-html="
                          HouseDetail.parkingNum
                            ? `地下车位数` + HouseDetail.parkingNum + `个`
                            : '待定'
                        "
                    ></span>
                  </p>
                </li>
                <h4>了解更多</h4>
                <li class="EstateDetail_li_p4">
                  <p>这个楼盘有什么优缺点？开发商资质如何？我有没有购房资质？更多问题，请致电我们免费帮您答疑解惑</p>
                  <div class="EstateDetail_li1_input">
                    <input type="text" placeholder="请输入您的电话号码" maxlength="11" v-model="phone" />
                    <button
                      @click="
                          clickType = 8;
                          subscribe(
                            '咨询返现详情',
                            '专业楼盘管家，深度解答！',
                            'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211111/ec7c2095870d43459e3713b406281806.png'
                          );
                        "
                    >免费咨询</button>
                  </div>
                </li>
              </ul>
            </div>
            
            <!-- 关键区域，街道，周边 -->
            <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
          </div>
        </div>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>

    <!-- 弹窗按钮订阅 -->
    <PopupForm
      :show="popupform.show"
      :title="popupform.title"
      :desc="popupform.desc"
      :cover="popupform.cover"
      :phone="popupform.phone"
      :smsState="popupform.smsState"
      :customTheme="popupform.customTheme"
      :background="popupform.background"
      :contentClass="popupform.contentClass"
      @phoneChange="phoneChange"
      @confirm="returnVisit"
      @cancel="
        popupform.show = false;
        popupform.background = '';
      "
    ></PopupForm>
    <!-- 订阅回调弹窗 -->
    <PopupSuccess
      :show="popupsubscribe.show"
      :cover="popupsubscribe.cover"
      :title="popupsubscribe.title"
      :desc="popupsubscribe.desc"
      @cancel="
        popupsubscribe.show = false;
        subscribeDisabled = false;
      "
    ></PopupSuccess>
  </div>
</template>

<script>
var head = {
  title: '成都✖✖✖✖✖✖✖✖✖✖', // 网页包头
  content: '成都✖✖✖✖✖✖✖✖✖✖', // 网页描述
  keywords: '成都,买房,管家,楼盘,买房网,✖✖✖✖✖✖✖✖✖✖', // 网页关键词
}
import axios from 'axios'
import u from '~/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [
        {
          rel: 'stylesheet',
          href: `/css/lpgk.css?v=${new Date().getTime()}`,
        },
      ],
    }
  },
  data() {
    return {
      activeCode: 1,
      userInfo: '',
      CashBackCode: false, //用户询问
      phone: '',
      //组件订阅弹窗
      popupsubscribe: {
        show: false, //订阅数据
      },
      customTheme: 0,
      contentClass: '',
      popupform: {
        show: false, //订阅成功数据
        phone: '',
      },
      clickType: '', // 1变价提醒2开盘提醒3咨询剩余房源4订阅楼盘动态5收藏楼盘6户型分析7电话咨询（询购房资格）8询返现9专车看房10咨询返现详情11咨询房贷首付
      subscribeDisabled: false,
    }
  },
  validate(ctx) {
    return /(.*?)\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl //域名
    var currentCity = ctx.currentCity //城市定位
    var cityList = ctx.cityList //
    var crumbListData = [] //栏目信息
    var estateId = ctx.params.id ? ctx.params.id.split('.')[0] : '' //楼盘ID
    var tabList = [
      {
        name: '楼盘首页',
        href: `/lpxq/${estateId}.html`,
      },
      {
        name: '基础信息',
        href: `/lpxqxx/${estateId}.html`,
      },
      {
        name: '楼盘相册',
        href: `/lpxqxc/${estateId}.html`,
      },
      {
        name: '楼盘户型',
        href: `/lpxqhx/${estateId}.html`,
      },
      {
        name: '楼盘动态',
        href: `/lpxqdt/${estateId}.html`,
      },
      {
        name: '周边配套',
        href: `/lpxqpt/${estateId}.html`,
      },
      {
        name: '房价走势',
        href: `/lpxqzs/${estateId}.html`,
      },
      {
        name: '你问我答',
        href: `/lpxqwd/${estateId}.html`,
        aliases: 'wenda',
      },
      {
        name: '免费专车',
        href: `/mfzc/${estateId}.html`,
      },
    ]
    var HouseDetail = [] //楼盘详情数据
    var HouseDynamicList = [] //楼盘动态数据
    var total_code = 0

    // 获取楼盘详情
    var getMetro = await u.http({
      url: '/pc/houseDetail/queryHouseInfoDetailById',
      params: {
        estateId: estateId, //楼盘ID
        userId: '', //用户ID
      },
    })
    if (getMetro.code == 200) {
      HouseDetail = getMetro.data.houseInfoDetail
      head.title = `${HouseDetail.name}楼盘信息、房价参考-✖✖✖✖✖✖✖✖✖✖`
      head.content = `✖✖✖✖✖✖✖✖✖✖为您提供${currentCity.cityName}${HouseDetail.name}楼盘详情信息，开发商,小区物业费,交房费用,${HouseDetail.name}规划面积,${HouseDetail.name}电话开盘时间。`
      head.keywords = `${HouseDetail.name}楼盘详情`
      // ==========楼盘面包屑============
      var regionCode = {
        title: `${HouseDetail.regionName}楼盘`,
        href: prefixUrl + `/lpcx/${HouseDetail.regionAliases}`,
      }
      // 202112071655 sry 合并路径
      var regionA = [HouseDetail.regionAliases]
      var streetA = [HouseDetail.streetAliases]
      var nowCrumbHref = u.emptyArrayIsNull(regionA.concat(streetA))
      if (HouseDetail.streetName && HouseDetail.streetAliases) {
        var streetCode = {
          title: `${HouseDetail.streetName}楼盘`,
          href: prefixUrl + `/lpcx/${nowCrumbHref.join('-')}`,
        }
      } else {
        var streetCode = null
      }
      var houseCode = {
        title: `${HouseDetail.name}`,
        href: prefixUrl + ctx.route.path,
      }
      // 修改栏目信息
      crumbListData = [
        {
          title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
          href: prefixUrl,
        },
      ]

      if (streetCode) {
        crumbListData.push(regionCode, streetCode, houseCode)
      } else {
        crumbListData.push(regionCode, houseCode)
      }
      // ==========楼盘面包屑============
    } else {
      // 202111091818 sry
      return ctx.redirect('/error.html')
    }

    // 楼盘实时动态
    var ByEstateId = await u.http({
      url: '/app/houseDynamic/queryHouseDynamicByEstateId',
      params: {
        estateId: estateId, //楼盘ID
        pageNum: 1, //显示第几页
        pageSize: 5, //一页显示多少条
      },
    })
    if (ByEstateId.code == 200) {
      HouseDynamicList = ByEstateId.data.list
      total_code = ByEstateId.data.total
    }

    return {
      tabList,
      prefixUrl,
      currentCity,
      cityList,
      crumbListData,
      estateId,
      HouseDynamicList,
      total_code,
      HouseDetail,
      regionList: ctx.regionList
    }
  },

  mounted() {},
  methods: {
    // 获取更多资讯
    getMoreInfo() {
      u.http({
        client: true,
        url: '/app/houseDynamic/queryHouseDynamicByEstateId',
        headers: {
          token: localStorage.getItem('token') || '',
        },
        params: {
          estateId: this.estateId, //楼盘ID
          pageNum: 1, //显示第几页
          pageSize: 30, //一页显示多少条
        },
      }).then((res) => {
        if (res.code == 200) {
          this.HouseDynamicList = res.data.list
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
      })
    },
    // ==========================订阅回访消息==================================
    // 预约
    subscribe(
      title,
      desc,
      cover,
      titleend,
      customTheme,
      background,
      contentClass,
      url
    ) {
      this.popupform.show = true
      this.popupform.title = title
      this.popupform.cover = cover
      this.popupform.smsState = this.smsState
      this.popupform.desc = desc
      if (localStorage.getItem('mobile')) {
        this.popupform.phone = Number(localStorage.getItem('mobile'))
      }
      this.popupsubscribe.title = titleend
      this.popupform.customTheme = customTheme ? Number(customTheme) : 0 //是否为背景验证
      this.popupform.background = background //背景验证背景图
      this.popupform.contentClass = contentClass //活动背景图class样式
      this.popupform.url = url
    },
    // 登录成功回调
    returnVisit() {
      this.popupform.show = false
      this.subscribeDisabled = true
      let url = getCookie('token')
        ? '/app/visitRecord/addVisitRecord'
        : '/app/visitRecord/addVisitRecordByNoToken'
      u.http({
        client: true,
        url,
        headers: {
          token: getCookie('token') || '',
        },
        params: {
          clickType: this.clickType,
          phone: this.popupform.phone,
          estateId: this.estateId,
        },
      }).then((res) => {
        if (this.popupform.url) {
          location.href = this.popupform.url
          return false
        }
        this.popupsubscribe.show = true
      })
    },
    // 监听手机号
    phoneChange(e) {
      this.popupform.phone = e
    },
  },
}
</script>
